<template>
  <div class="my-order" :class="{ bg: orderList.length == 0 }">
    <ul v-if="orderList.length != 0">
      <li
        @click="orderDetail(item.id)"
        v-for="(item, index) in orderList"
        :key="index"
      >
        <div class="top">
          <span>回收时间：{{ item.time }}</span
          ><span class="current">{{
            item.orderStatus == 0
              ? "预约成功"
              : item.orderStatus == 1
              ? "已取消"
              : "已完成"
          }}</span>
        </div>
        <div class="bottom">
          <p>
            回收地址：{{
              (
                item.subDistrict +
                item.communityName +
                item.villageName +
                item.address
              ).slice(0, 14) + "..."
            }}
          </p>
          <p>联系人：{{ item.consignee }}</p>
          <p>联系电话：{{ item.mobile }}</p>
          <p>
            <span>回收详情：{{ item.recycleDetails.join("、") }}</span
            ><span><img src="../assets/img/更多拷贝@2x.png" alt=""/></span>
          </p>
        </div>
      </li>
    </ul>
    <span class="after" v-if="orderList.length == 0">暂无订单记录</span>
  </div>
</template>
<script>
import { openid } from "../config";
export default {
  name: "",
  created() {
    this.orderList = [];
    this.getOrderList();
    window.onpopstate = null;
  },
  mounted() {
    this.listenScroll();
  },
  watch: {
    "$route.path": function(newPath, oldPath) {
      if (newPath == "/my-order" && oldPath == "/home") {
        this.listenScroll();
        this.getOrderList();
      }

      if (newPath == "/my-order" && oldPath == "/order-detail") {
        window.onpopstate = null;
      }
    },
  },
  methods: {
    listenScroll() {
      function getScrollTop() {
        var scrollTop = 0,
          bodyScrollTop = 0,
          documentScrollTop = 0;
        if (document.body) {
          bodyScrollTop = document.body.scrollTop;
        }
        if (document.documentElement) {
          documentScrollTop = document.documentElement.scrollTop;
        }
        scrollTop =
          bodyScrollTop - documentScrollTop > 0
            ? bodyScrollTop
            : documentScrollTop;
        return scrollTop;
      }
      function getWindowHeight() {
        var windowHeight = 0;
        if (document.compatMode == "CSS1Compat") {
          windowHeight = document.documentElement.clientHeight;
        } else {
          windowHeight = document.body.clientHeight;
        }
        return windowHeight;
      }
      // 文档的总高度
      function getScrollHeight() {
        var scrollHeight = 0,
          bodyScrollHeight = 0,
          documentScrollHeight = 0;
        if (document.body) {
          bodyScrollHeight = document.body.scrollHeight;
        }
        if (document.documentElement) {
          documentScrollHeight = document.documentElement.scrollHeight;
        }
        scrollHeight =
          bodyScrollHeight - documentScrollHeight > 0
            ? bodyScrollHeight
            : documentScrollHeight;
        return scrollHeight;
      }
      window.onscroll = () => {
        if (getScrollTop() == 0) {
          console.log("顶部");
          this.query.page = 1;
          this.query.limit = 10;

          this.getOrderList();
        } else if (getScrollTop() + getWindowHeight() == getScrollHeight()) {
          console.log("已经到最底部了！!");
          this.query.page = ++this.query.page;
          this.query.limit = 10;
          this.getOrderList();
        }
      };
    },
    getOrderList() {
      this.$axios
        .get("/order/recycleOrder/page", {
          params: {
            page: this.query.page,
            limit: this.query.limit,
            openid: this.query.openid,
          },
        })
        .then(({ data: res }) => {
          console.log(res);
          if (res.code != 0) {
            return this.$toast({
              message: res.msg,
              position: "middle",
              duration: 1500,
            });
          }
          if (this.query.page === 1) {
            this.orderList = [];
            this.orderList = res.data.list;
          } else {
            if (res.data.list.length != 0) {
              this.orderList.push(...res.data.list);
            } else {
              return this.$toast({
                message: "无更多数据",
                position: "middle",
                duration: 1500,
              });
            }
          }

          this.orderList.map((item) => {
            item.time =
              this.dateFormat(item.startDate, "", "/") +
              "-" +
              new Date(parseInt(item.endDate))
                .getHours()
                .toString()
                .padStart(2, 0) +
              ":" +
              new Date(parseInt(item.endDate))
                .getMinutes()
                .toString()
                .padStart(2, 0);
          });
        })
        .catch(() => {});
    },
    orderDetail(id) {
      this.$router.push({
        path: "/order-detail",
        query: {
          id,
          a: "search",
        },
      });
    },
  },
  data() {
    return {
      query: {
        page: 1,
        limit: 10,
        openid,
      },
      orderList: [],
    };
  },
};
</script>
<style lang="scss" scoped>
.my-order {
  width: 100%;
  min-height: 100%;
  background: #f5f5f5;
  padding: 0.9375rem /* 15/16 */ 0.9375rem /* 15/16 */ 0.3125rem /* 5/16 */;
  box-sizing: border-box;
  &.bg {
    background-image: url("../assets/img/暂无订单记录@2x.png");
    background-repeat: no-repeat;
    background-position: 50% 50%;
  }
  position: relative;
  .after {
    position: absolute;
    left: 50%;
    top: 70%;
    transform: translate(-50%, 0);
    width: auto;
    height: auto;
    color: #666;
    font-size: 1.25rem /* 20/16 */;
  }
  ul {
    list-style: none;
    margin: 0;
    padding: 0;
    width: 100%;
    height: auto;
    li {
      // text-align: center;
      background: #fff;
      margin-bottom: 0.625rem /* 10/16 */;
      border-radius: 0.625rem /* 10/16 */;
      width: 100%;
      height: 9.6875rem /* 155/16 */;
      padding: 0 0.9375rem /* 15/16 */ 1.25rem /* 20/16 */;
      box-sizing: border-box;
      .top {
        text-align: left;
        width: 100%;
        height: 2.5rem /* 40/16 */;
        line-height: 2.5rem /* 40/16 */;
        // background-color: rgba(0, 0, 0, 0);
        position: relative;
        font-size: 13px;
        font-weight: bold;
        color: #333;
        display: flex;
        flex-direction: row;
        justify-content: space-between;

        &::after {
          content: "";
          display: inline-block;
          width: 100%;
          height: 0;
          border-bottom: 0.5px solid #eeeeee;
          position: absolute;
          bottom: 0;
          left: 0;
        }
        span {
          &.current {
            color: #3ba32a;
          }
        }
      }
      .bottom {
        p {
          font-weight: bold;
          color: #999;
          font-size: 12px;
          margin: 0;
          padding: 0;
          height: 1.5625rem /* 25/16 */;
          line-height: 1.5625rem /* 25/16 */;
          &:last-of-type {
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            span {
              img {
                width: 0.40625rem /* 6.5/16 */;
                height: 0.71875rem /* 11.5/16 */;
              }
            }
          }
        }
      }
    }
  }
}
</style>
